<template>
    <div class="app-container">
        <el-card shadow="never" style="margin-bottom:24px;">
            <el-row>
                <i class="el-icon-plus"></i>
                <span class="search-title">新增</span>
            </el-row>
            <el-row class="row-margin">
                <el-button type="primary" size="small" @click="handleAddStorage">
                    新增入库
                </el-button>
            </el-row>
        </el-card>
        <el-tabs v-model="storageInTabModel" type="card" @tab-click="handleChangeTab">
            <el-tab-pane label="入库管理" name="manage">
                <el-dialog :visible.sync="goodsLookupModalVisible" destroy-on-close>
                    <goods-lookup-modal :batchId="this.curBatchId" @hide="handleCloseLookupModal">
                    </goods-lookup-modal>
                </el-dialog>
                <el-card class="filter-container" shadow="never">
                    <el-row>
                        <i class="el-icon-search"></i>
                        <span>筛选搜索</span>
                    </el-row>
                    <el-row class="row-margin">
                        <el-form :model="listQuery1" ref="filterFormRef1" inline>
                            <el-form-item prop="operType" label="入库类型">
                                <el-select v-model="listQuery1.operType" placeholder="入库类型">
                                    <el-option label="所有" value=""></el-option>
                                    <el-option
                                        v-for="item in operTypes"
                                        :key="item.type"
                                        :label="item.desc"
                                        :value="item.type"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="bactchNo">
                                <el-input
                                    style="width:200px;margin-left:10px;"
                                    clearable
                                    placeholder="入库单号"
                                    suffix-icon="el-icon-search"
                                    v-model="listQuery1.bactchNo"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="startTime">
                                <el-date-picker
                                    style="width:200px;margin-left:10px;"
                                    placeholder="开始时间"
                                    v-model="listQuery1.startTime"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item prop="endTime">
                                <el-date-picker
                                    style="width:200px;margin-left:10px;"
                                    placeholder="结束时间"
                                    v-model="listQuery1.endTime"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    style="margin-left: 10px;"
                                    @click="handleSearchStorageList1()"
                                    type="primary"
                                >
                                    查询
                                </el-button>
                                <el-button @click="handleResetCaptainSearch1()">
                                    重置
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="storageListTable1Ref"
                        :data="storageDataList1"
                        style="width: 100%"
                        v-loading="listLoading1"
                        border
                    >
                        <el-table-column label="入库单号" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.batchNo }}</template>
                        </el-table-column>
                        <el-table-column label="入库类型" width="100" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.operType === 'SUPPLYIN'" type="success"
                                    >供货入库</el-tag
                                >
                                <el-tag v-if="scope.row.operType === 'REFUNDIN'" type="warning"
                                    >报溢入库</el-tag
                                >
                                <el-tag
                                    v-if="scope.row.operType === 'OVERFLOWIN'"
                                    type="danger"
                                ></el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作人" align="center">
                            <template slot-scope="scope">{{ scope.row.operName }}</template>
                        </el-table-column>
                        <el-table-column label="入库件数" width="200" align="center">
                            <template slot-scope="scope">{{ scope.row.operTotalStock }}</template>
                        </el-table-column>
                        <el-table-column label="入库金额" width="100" align="center">
                            <template slot-scope="scope">{{
                                scope.row.totalSupplyPrice * scope.row.operTotalStock
                            }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleLookup(scope.row.id)"
                                    >查询
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery1.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery1.pageNum"
                        :total="total1"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="入库查询" name="lookups">
                <el-card class="filter-container" shadow="never">
                    <el-row>
                        <i class="el-icon-search"></i>
                        <span>筛选搜索</span>
                    </el-row>
                    <el-row class="row-margin">
                        <el-form :model="listQuery2" ref="filterFormRef2" inline>
                            <el-form-item prop="operType" label="入库类型">
                                <el-select v-model="listQuery2.operType" placeholder="入库类型">
                                    <el-option label="所有" value=""></el-option>
                                    <el-option
                                        v-for="item in operTypes"
                                        :key="item.type"
                                        :label="item.desc"
                                        :value="item.type"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="bactchNo">
                                <el-input
                                    style="width:200px;margin-left:10px;"
                                    clearable
                                    placeholder="入库单号"
                                    suffix-icon="el-icon-search"
                                    v-model="listQuery2.bactchNo"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="startTime">
                                <el-date-picker
                                    style="width:200px;margin-left:10px;"
                                    placeholder="开始时间"
                                    v-model="listQuery2.startTime"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item prop="endTime">
                                <el-date-picker
                                    style="width:200px;margin-left:10px;"
                                    placeholder="结束时间"
                                    v-model="listQuery2.endTime"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item prop="categoryId">
                                <el-cascader
                                    v-model="listQuery2.categoryId"
                                    :options="categoryList"
                                    :props="{ checkStrictly: false, emitPath: false }"
                                    placeholder="商品分类"
                                    clearable
                                ></el-cascader>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    style="margin-left: 10px;"
                                    @click="handleSearchStorageList2()"
                                    type="primary"
                                >
                                    查询
                                </el-button>
                                <el-button @click="handleResetCaptainSearch2()">
                                    重置
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="storageListTable2Ref"
                        :data="storageDataList2"
                        style="width: 100%"
                        v-loading="listLoading2"
                        border
                    >
                        <el-table-column label="商品" width="300" align="center">
                            <template slot-scope="scope">
                                <el-row type="flex" justify="center">
                                    <el-avatar
                                        shape="square"
                                        :size="50"
                                        :src="scope.row.resourceUrl"
                                    >
                                        <img :src="scope.row.resourceUrl" />
                                    </el-avatar>
                                    <div class="goods-info">
                                        <div class="goods-name" :title="scope.row.name">
                                            {{ scope.row.goodsName }}
                                        </div>
                                    </div>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="入库类型" width="100" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.operType === 'SUPPLYIN'" type="success"
                                    >供货入库</el-tag
                                >
                                <el-tag v-if="scope.row.operType === 'REFUNDIN'" type="warning"
                                    >报溢入库</el-tag
                                >
                                <el-tag
                                    v-if="scope.row.operType === 'OVERFLOWIN'"
                                    type="danger"
                                ></el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" align="center">
                            <template slot-scope="scope">{{ scope.row.unit }}</template>
                        </el-table-column>
                        <el-table-column label="入库单号" width="200" align="center">
                            <template slot-scope="scope">{{ scope.row.batchNo }}</template>
                        </el-table-column>
                        <el-table-column label="入库时间" width="140" align="center">
                            <template slot-scope="scope">{{
                                parseTimeToCh(scope.row.createTime)
                            }}</template>
                        </el-table-column>
                        <el-table-column label="入库数量" width="140" align="center">
                            <template slot-scope="scope">{{ scope.row.operStock }}</template>
                        </el-table-column>
                        <el-table-column label="供货价" width="140" align="center">
                            <template slot-scope="scope">{{
                                scope.row.intimeSupplyPrice
                            }}</template>
                        </el-table-column>
                        <el-table-column label="入库金额" width="140" align="center">
                            <template slot-scope="scope">{{ scope.row.totalSupplyPrice }}</template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery2.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery2.pageNum"
                        :total="total2"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { getCateList } from '@/api/goodsBase';
import { getStorageInTypes, getStorageInManageList, getStorageInLooksList } from '@/api/storage';
import PopConfirm from '@/components/PopConfirm/popConfirm';
import GoodsLookupModal from './components/goodsLookupModal';
import { parseTimeToCh } from '@/utils';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    categoryId: null,
    startTime: null,
    endTime: null,
    batchNo: null,
    operType: null
};
export default {
    components: {
        PopConfirm,
        GoodsLookupModal
    },
    data() {
        return {
            goodsLookupModalVisible: false,
            curBatchId: null,
            operTypes: [],
            categoryList: [],
            storageInTabModel: 'manage',
            storageDataList1: [],
            storageDataList2: [],
            listLoading1: false,
            listLoading2: false,
            listQuery1: Object.assign({}, defaultListQuery),
            listQuery2: Object.assign({}, defaultListQuery),
            total1: 0,
            total2: 0
        };
    },
    created() {
        this.fetchStorageInTypes();
        this.fetchCategoryList();
        this.getStorageList1();
    },
    watch: {},
    filters: {},
    methods: {
        handleChangeTab(val) {
            if (val.name === 'lookups') {
                this.getStorageList2();
            } else if (val.name === 'manage') {
                this.getStorageList1();
            }
        },
        getStorageList1() {
            this.listLoading1 = true;
            getStorageInManageList(this.listQuery1).then(res => {
                this.listLoading1 = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.storageDataList1 = res.data.data;
                    this.total1 = res.data.extra.total;
                } else {
                    this.storageDataList1 = [];
                }
            });
        },
        getStorageList2() {
            this.listLoading2 = true;
            getStorageInLooksList(this.listQuery2).then(res => {
                this.listLoading2 = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.storageDataList2 = res.data.data;
                    this.total2 = res.data.extra.total;
                } else {
                    this.storageDataList2 = [];
                }
            });
        },
        handleAddStorage() {
            this.$router.push('addStorageIn');
        },
        handleSearchStorageList1() {
            this.listQuery1.pageNum = 1;
            this.getStorageList1();
        },
        handleResetCaptainSearch1() {
            this.$refs.filterFormRef1.resetFields();
        },
        handleSearchStorageList2() {
            this.listQuery2.pageNum = 1;
            this.getStorageList2();
        },
        handleResetCaptainSearch2() {
            this.$refs.filterFormRef2.resetFields();
        },
        handleSizeChange1(val) {
            this.listQuery1.pageNum = 1;
            this.listQuery1.pageSize = val;
            this.getStorageList1();
        },
        handleCurrentChange1(val) {
            this.listQuery1.pageNum = val;
            this.getStorageList1();
        },
        handleSizeChange2(val) {
            this.listQuery2.pageNum = 1;
            this.listQuery2.pageSize = val;
            this.getStorageList2();
        },
        handleCurrentChange2(val) {
            this.listQuery2.pageNum = val;
            this.getStorageList2();
        },
        handleLookup(batchId) {
            this.curBatchId = batchId;
            this.goodsLookupModalVisible = true;
        },
        handleCloseLookupModal() {
            this.goodsLookupModalVisible = false;
        },
        fetchStorageInTypes() {
            getStorageInTypes().then(res => {
                if (res.data && res.data.success == true) {
                    this.operTypes = res.data.data;
                } else {
                    this.operTypes = [];
                }
            });
        },
        fetchCategoryList() {
            getCateList().then(res => {
                if (res.data && res.data.success == true) {
                    let list = res.data.data;
                    this.categoryList = list.map(el => {
                        return {
                            value: el.category.id,
                            label: el.category.name,
                            children: el.detailList.map(el => {
                                return { value: el.categoryId, label: el.name };
                            })
                        };
                    });
                } else {
                    this.categoryList = [];
                }
            });
        },
        parseTimeToCh(val) {
            return parseTimeToCh(val);
        }
    }
};
</script>
<style></style>
